<template>
	<el-drawer v-model="control.visible" :with-header="false" :direction="control.direction"
		:before-close="public_close">
		<div class="xp-block-banner">
			<div class="xp-title">状态配置</div>
			<div class="xp-content">工作流是在不同的状态下流转</div>
		</div>
		<div class="xp-block-conent">
			<el-form ref="form" :model="control.form" :rules="control.rules" label-position="top">
				<el-form-item label="状态名称" prop="name">
					<el-input v-model="control.form.name" autocomplete="off" placeholder="请输入" size="large" />
				</el-form-item>
				<el-form-item label="审核人指派" prop="assigneetype" v-if="!sp.isFstatusEndNode">
					<el-select v-model="control.form.assigneetype" placeholder="请选择" style="width: 45%">
						<el-option v-for="item in data.assigneetypeList" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
					<el-select v-model="control.form.assigneetype_user_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.assigneetype=='user'">
						<el-option v-for="item in data.userList" :key="item.id" :label="item.nickname"
							:value="item.id" />
					</el-select>
					<el-select v-model="control.form.assigneetype_role_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.assigneetype=='role'">
						<el-option v-for="item in data.roleList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核通过后的状态" prop="pass_typefstatus_id" v-if="!sp.isFstatusEndNode">
					<el-select v-model="control.form.pass_typefstatus_id" placeholder="请选择" style="width: 100%">
						<el-option v-for="item in data.data.fstatusList" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核退回的状态" prop="rejecttype" v-if="!sp.isFstatusEndNode">
					<el-select v-model="control.form.rejecttype" placeholder="请选择" style="width: 45%">
						<el-option v-for="item in data.rejecttypeList" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
					<el-select v-model="control.form.rejecttype_to_typefstatus_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.rejecttype=='to'">
						<el-option v-for="item in data.data.fstatusList" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="public_close">取消</el-button>
				<el-button type="primary" @click="control_submit">保存</el-button>
			</div>
		</template>
	</el-drawer>
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		props: {
			modelValue: {
				type: Object,
				default: []
			},
			data: {
				type: Object,
				default: {}
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {
					clickFstatusId: null,
					clickFstatusIndex: null,
					clickFlogicIndex: null,
					callbackFunc: null,
					isFstatusBeginNode: false,
					isFstatusEndNode: false,
				},
				sr: {},
				control: {
					visible: false,
					direction: 'rtl',
					form: {
						id: null,
						name: null,
						pass_typefstatus_id: null,
						rejecttype: null,
						rejecttype_to_typefstatus_id: null,
						assigneetype: null,
						assigneetype_user_id: null,
						assigneetype_role_id: null,
						assigneetype_field: null,
						assigneetype_logic: null,
					},
					rules: {
						name: {
							required: true,
						},
						assigneetype: {
							required: true,
						},
						rejecttype: {
							required: true,
						},
						pass_typefstatus_id: {
							required: true,
						},
						flogicjson: {
							required: true,
						}
					},
				},
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
			},
			public_show(clickFstatusId, callbackFunc) {
				let that = this;
				that.control.visible = true;
				that.sp.clickFstatusId = clickFstatusId;
				that.sp.callbackFunc = callbackFunc;

				that.sp.clickFstatusIndex = xsArrayUtils.indexOfByObjectKey(that.data.data.fstatusList, 'id',
					clickFstatusId);
				let fstatus = that.data.data.fstatusList[that.sp.clickFstatusIndex];
				if(fstatus.id==that.data.data.fstatusBeginId){
					that.sp.isFstatusBeginNode = true;
				}else{
					that.sp.isFstatusBeginNode = false;
				}
				if(fstatus.id==that.data.data.fstatusEndId){
					that.sp.isFstatusEndNode = true;
				}else{
					that.sp.isFstatusEndNode = false;
				}
				
				
				for (let index in that.data.data.flogicList) {
					let item = that.data.data.flogicList[index];
					if (xsArrayUtils.contains(["all", "other"], item.logictype) && item.flowfstatus_id == fstatus.id) {
						that.sp.clickFlogicIndex = index;
						break;
					}
				}
				let flogic = that.data.data.flogicList[that.sp.clickFlogicIndex]; 
				xcHttpUtils.row2form(flogic, that.control.form);

				that.control.form.id = fstatus.id;
				that.control.form.name = fstatus.name;

			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			public_close() {
				let that = this;
				that.control.visible = false;
			},
			control_submit() {
				let that = this;
				that.$refs.form.validate().then(res => {
					that.data.data.flogicList[that.sp.clickFlogicIndex]["pass_typefstatus_id"] = that.control.form["pass_typefstatus_id"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["rejecttype"] = that.control.form["rejecttype"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["rejecttype_to_typefstatus_id"] = that.control.form["rejecttype_to_typefstatus_id"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["assigneetype_user_id"] = that.control.form["assigneetype_user_id"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["assigneetype_role_id"] = that.control.form["assigneetype_role_id"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["assigneetype_field"] = that.control.form["assigneetype_field"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["assigneetype"] = that.control.form["assigneetype"];
					that.data.data.flogicList[that.sp.clickFlogicIndex]["assigneetype_logic"] = that.control.form["assigneetype_logic"];

					that.data.data.fstatusList[that.sp.clickFstatusIndex]["name"] = that.control.form["name"];

					that.public_close();
					that.sp.callbackFunc();
				});
			},
		}
	}
</script>

<style lang="scss">
	.xp-block-banner {
		padding: $uni-spacing-col-base;
		background-color: $uni-color-primary;
		height: 160px;
		width: 100%;
		color: #FFFFFF;
		text-align: center;

		.xp-title {
			padding-top: 40px;

			font-size: $uni-font-size-subtitle;
		}

		.xp-content {
			font-size: $uni-font-size-base;
			padding: $uni-spacing-col-lg;

		}
	}

	.xp-block-conent {
		padding: $uni-img-size-sm;

		.xp-flogic-tabs>.el-tabs__content {
			padding: 32px;
			color: #6b778c;
			font-size: 32px;
			font-weight: 600;
		}

		.xp-flogic-tabs .custom-tabs-label .el-icon {
			vertical-align: middle;
		}

		.xp-flogic-tabs .custom-tabs-label span {
			vertical-align: middle;
			margin-left: 4px;
		}
	}
</style>